<template>
  <div>
    <template>
      <el-table
        :data="data.data"
        style="width: 100%"
      >
        <el-table-column label="产品分类ID">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row._id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品分类">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="updata(scope.row._id)"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleOne(scope.row._id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import api from "../../../network/apis/api.js";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("classify");
export default {
  data() {
    return {};
  },
  mounted() {
    this.getClassify();
  },
  computed: {
    ...mapState(["data"]),
  },
  methods: {
    ...mapActions(["getClassify"]),
    updata(_id) {
      this.$router.push({
        name: "UpdateClassify",
        params: { _id },
      });
    },
    async deleOne(_id) {
      const { data } = await api.classify.deleOneClassify(_id);
      if (data.status) {
        this.getClassify();
      } else {
        this.$message({
          showClose: true,
          message: "删除失败",
          type: "error",
        });
      }
    },
  },
};
</script>

<style></style>
